/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-08-27 17:52:43
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-09-27 07:55:52
 * @FilePath: /react18-vite-admin/src/components/ui/LangSelect/LangSelect.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Dropdown, ConfigProvider } from 'antd';
// import type { ItemType } from 'antd/es/menu/interface';
import Icon from '@ant-design/icons';
import { Icon as IconifyIcon } from '@iconify/react';

import { useAppStore, useSettingsStore } from '@/store';

const LangSelect = (props: { className?: string }) => {
    const { className } = props;
    const { lang, setLang } = useAppStore((state) => state);
    const { cssVarObject } = useSettingsStore((state) => state);

    const langOptions = [
        {
            label: '中文',
            key: 'zhCn'
        },
        {
            label: 'English',
            key: 'en'
        }
    ];

    return (
        <ConfigProvider
            theme={{
                token: {
                    colorText: cssVarObject['--c-text1-default']
                }
            }}
        >
            <Dropdown
                menu={{
                    items: langOptions,
                    selectedKeys: [lang],
                    onClick: (item) => setLang(item.key as AppLangType)
                }}
            >
                <Icon className={className}
                    component={() => (
                        <IconifyIcon
                            icon="mdi:language"
                            className={`cursor-pointer`}
                        />
                    )}
                />
            </Dropdown>
        </ConfigProvider>
    );
};

export default LangSelect;
